<!--
 * @Author: shiweizhen 787632169@qq.com
 * @Date: 2025-07-11 11:01:43
 * @LastEditors: shiweizhen 787632169@qq.com
 * @LastEditTime: 2025-07-17 11:16:54
 * @Description: 
 * Copyright (c) 2025-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <AgGridVue style="width: 100%;height: 100%;" :columnDefs="colDefs" :rowData="rowData" :default-col-def="defaultColDef"
    :pagination="true" :cell-selection="true" />
</template>

<script setup lang="ts">
import type { ColDef, ValueFormatterParams } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";
import companyLogo from "./components/company-logo.vue";
ModuleRegistry.registerModules([AllCommunityModule]);
// Row Data Interface
interface IRow {
  mission: string;
  company: string;
  location: string;
  date: string;
  time: string;
  rocket: string;
  price: number;
  successful: boolean;
}

const rowData = ref<IRow[]>([]);

const colDefs = ref<ColDef<IRow>[]>([
  { field: "mission", filter: true },
  { field: "company", cellRenderer: companyLogo },
  { field: "location" },
  { field: "date" },
  {
    field: "price", valueFormatter: (params: ValueFormatterParams) => {
      return `$${params.value.toLocaleString()}`;
    }
  },
  { field: "successful" },
  { field: "rocket" }
]);

const defaultColDef = ref<ColDef>({
  filter: true,
  editable: true
})

const fetchData = async () => {
  const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json');
  return response.json();
};

onMounted(async () => {
  rowData.value = await fetchData()
})

</script>